<template>
	<div id="HotList">
		<x-header :left-options="{showBack: false}" class="header" title="slot:overwrite-title">
			<!--<a slot="left" href="#/Category"><i class="tp-icon tribune-head-search"></i></a>-->
			<div class="header-overwrite-title" slot="overwrite-title">
				<button-tab>
					<button-tab-item :key="index" @on-item-click="tabChange(index,item.path)" v-for="(item,index) in list" :selected="item.name === $route.name">
						{{item.text}}
					</button-tab-item>
				</button-tab>
			</div>
			<a slot="right">
				<router-link to="/tribune/Publish">
					<i class="tp-icon icon-photo"></i>
				</router-link>
			</a>
		</x-header>
		<div class="groom">
			<span>推荐有趣的人给你</span>
			<!--<i class="arrow-down tribune-arrow-right"></i>-->
			<div class="imglist">
				<ul>
					<li v-for="item in memberList">
						<img :src="'/los/uploads/thumb/header/' + item.member_id + '_76X76.jpeg'" alt="" />
					</li>
				</ul>
			</div>
		</div>
		<div class="common-list">
			<ul class="common-wrap">
				<li v-for="(item,index) in threadList">
					<div class="title-bar">
						<img :src="'/los/uploads/thumb/header/' + item.member.member_id + '_76X76.jpeg'" alt="" class="photo" />
						<img src="../assets/images/tribune/ic_forum_list_v2.png" alt="" class="logo" />
						<div class="desc">
							<div>
								<h2>{{item.member.member_nickname}}</h2>
								<img src="../assets/images/tribune/ic_forum_list_lv9.png" alt="" />
							</div>
							<p>{{common.threadTime(item.thread_time)}} {{item.thread_vcount}}次浏览</p>
						</div>
						<span v-if="item.member_follow == 1" @click="memberFollow(item.member_id,index)" id="concerned">已关注</span>
						<span v-else @click="memberFollow(item.member_id,index)" id="concerned">+关注</span>
					</div>
					<div class="goods-detail">
						<router-link :to="'/tribune/Thread/thread_id/' + item.thread_id">
							<p v-html="item.thread_content"></p>
							<ul>
								<li v-if="item.thread_imgs != ''" v-for="img in item.thread_imgs">
									<img :src="img" alt="" />
								</li>
							</ul>
						</router-link>
						<div v-if="item.thread_link != null">
							<div class="link-style" v-if="item.thread_link.href != ''">
								<a :href="item.thread_link.href">
									<div class="link">
										<i class="tribune-icon tribune-link"></i>
										<span>{{item.thread_link.text}}</span>
									</div>
								</a>
							</div>
						</div>
						<div v-if="item.thread_nearpois && item.thread_nearpois.name != '你在哪里？'" class="link-style">
							<div class="address">
								<i class="publish-add tribune-publish_add"></i>
								<span> {{item.thread_nearpois.name}}</span>
							</div>
						</div>

					</div>
					<div class="browse">
						<ul class="browse-data">
							<li>
								<span>{{item.thread_vshare}}</span>
								<i class="tribune-icon tribune-relay"></i>
							</li>
							<li @click="threadLike(item.thread_id,index)">
								<span class="vlike">{{item.thread_vlike}}</span>
								<i class="tribune-icon tribune-praise"></i>
								<!--<i v-if="item.like_state == 0" class="tribune-icon tribune-praise"></i>
								<i v-else class="tribune-icon tribune-praise-on"></i>-->
							</li>
							<li>
								<span v-if="item.sub_count == null">0</span>
								<span v-else>{{item.sub_count}}</span>
								<i class="tribune-icon tribune-comment"></i>
							</li>
						</ul>
						<ul class="browse-imgs">
							<li v-for="items in item.likes">
								<img v-if="items.member_id == undefined" src="../assets/images/home/defaultImg.jpg" alt="" class="photo" id="likes" />
								<img v-else :src="'/los/uploads/thumb/header/' + items.member_id + '_76X76.jpeg'" alt="" class="photo" id="likes" />
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
		<bottom></bottom>
		<toast v-model="success" type="text" width="3rem">{{msg}}</toast>
	</div>
</template>

<script>
	import wx from 'weixin-js-sdk';
	import $ from 'jquery'
	import axios from 'axios'
	import bottom from '../components/comp/Footer';
	import { XHeader, ButtonTab, ButtonTabItem, Toast } from 'vux'
	export default {
		data() {
			return {
				list: [{
						name: 'HotList',
						path: '/tribune/HotList',
						text: '热门'
					},
					{
						name: '',
						path: '',
						text: '最新'
					},
				],
				threadList: [],
				member: {},
				success: false,
				Praise: false,
				msg: '',
				shareUrl: '',
				memberList: []
			}
		},
		components: {
			XHeader,
			ButtonTab,
			ButtonTabItem,
			Toast,
			bottom
		},
		mounted() {
			this.getThreadList();
			this.memberRec();
		},
		destroyed() {
			this.$destroy();
		},
		methods: {
			//获取推荐有趣的人
			memberRec: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/forum/member_rec.json'
				}).then((result) => {
					if(result.data.code == 1) {
						this.memberList = result.data.data.thread_member;
					}
				}).catch((err) => {

				})
			},

			//获取推荐列表
			getThreadList: function() {
				let more = true;
				let page = 1;
				var _this = this;
				this.$http({
					method: 'GET',
					url: '/los/api/forum/thread_list.json'
				}).then((result) => {
					if(result.data.code == 1) {
						this.threadList = result.data.data;
						$.each(this.threadList, function(index, value) {
							_this.getThreadLike(value.thread_id);
						})
					}
				}).catch((err) => {

				})
				$(window).scroll(function() {
					var htmlHeight = $(document).height();
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							axios.get('/los/api/forum/thread_list.json' + '?page=' + page).then(function(result) {
								$.each(result.data.data, function(index, val) {
									_this.threadList.push(val);
								});
								more = true;
								if(result.data.code == 0) {
									more = false;
								}
							}).catch(function(error) {
								console.log(error);
							});
						}
					}
				})
			},
			//点赞
			threadLike: function(thread_id, index) {
				var params = {
					thread_id: thread_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/forum/thread_like.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						if(result.data.data.thread_like.like_state == 1) {
							this.success = !this.success;
							this.msg = result.data.msg;
							this.$nextTick(() => {
								this.threadList[index].thread_vlike++;
								this.threadList[index].likes.unshift(result.data.data.thread_like);
							})
						} else {
							this.success = !this.success;
							this.msg = result.data.msg;
							this.$nextTick(() => {
								this.threadList[index].thread_vlike--;
								this.threadList[index].likes.shift(result.data.data.thread_like);
							})
						}

					}
				}).catch((err) => {

				})
			},

			//点击关注
			memberFollow: function(member_id, index) {
				var params = {
					member_id: member_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/forum/member_follow.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = result.data.msg;
						if(result.data.data.member_follow.follow_state == 0) {
							$('#concerned').text('+关注');
						} else {
							$('#concerned').text('已关注');
						}
					}
				}).catch((err) => {

				})
			},

			tabChange: function(index, url) {
				this.$router.push(url);
			},
		}
	}
</script>

<style scoped>
	#HotList {
		position: relative;
		padding-bottom: 2rem;
	}

	.header {
		background: #fff;
		height: 1.17rem;
		line-height: 1.17rem;
	}

	.groom {
		width: 100%;
		height: 1.44rem;
		line-height: 1.44rem;
		padding: 0 0.26rem;
		overflow: hidden;
		background: #fff;
		margin-top: 0.26rem;
	}

	.groom span {
		float: left;
		font-size: 0.4rem;
		color: #222;
	}

	.groom .imglist {
		height: 1.44rem;
		float: right;
		overflow: hidden;
		margin-right: 0.37rem;
		width: 56%;
	}

	.groom .imglist ul {
		overflow: hidden;
	}

	.groom .imglist ul li {
		float: right;
	}

	.groom .imglist img {
		width: 1.06rem;
		height: 1.06rem;
		border-radius: 50%;
		margin: 0.18rem 0;
	}

	.groom i {
		float: right;
		margin: 0.52rem 0;
	}

	.common-list {
		margin-top: 0.26rem;
	}

	.common-list .common-wrap {
		width: 100%;
	}

	.common-list .common-wrap>li {
		margin-bottom: 0.26rem;
		background: #fff;
		padding: 0.26rem 0.26rem 0;
	}

	.common-list .title-bar {
		overflow: hidden;
		position: relative;
	}

	.common-list .title-bar .photo {
		float: left;
		width: 1.06rem;
		height: 1.06rem;
		border-radius: 50%;
	}

	.common-list .title-bar .logo {
		position: absolute;
		width: 0.42rem;
		height: 0.42rem;
		left: 0.66rem;
		top: 0.66rem;
	}

	.common-list .title-bar .desc {
		float: left;
		margin-left: 0.26rem;
	}

	.common-list .title-bar .desc>div {
		overflow: hidden;
	}

	.common-list .title-bar .desc h2 {
		font-size: 0.4rem;
		color: #222;
		float: left;
	}

	.common-list .title-bar .desc img {
		float: left;
		width: 0.44rem;
		height: 0.44rem;
		margin-left: 0.1rem;
	}

	.common-list .title-bar .desc p {
		font-size: 0.32rem;
		color: #999;
		line-height: 0.48rem;
		margin-top: 0.1rem;
	}

	.common-list .title-bar span {
		float: right;
		margin-top: 0.26rem;
		width: 1.28rem;
		height: 0.53rem;
		line-height: 0.53rem;
		background: #eee;
		text-align: center;
		border-radius: 0.26rem;
		font-size: 0.32rem;
		color: #a30000;
	}

	.common-list .goods-detail {
		margin: 0.4rem 0 0.26rem;
	}

	.common-list .goods-detail p {
		font-size: 0.4rem;
		color: #222;
		line-height: 0.58rem;
	}

	.common-list .goods-detail ul {
		overflow: hidden;
		margin-top: 0.26rem;
	}

	.common-list .goods-detail ul li {
		float: left;
		width: 3.12rem;
		height: 3.12rem;
		margin-right: 0.05rem;
		margin-bottom: 0.05rem;
	}

	.common-list .goods-detail ul li:nth-child(3n) {
		margin-right: 0;
	}

	.common-list .goods-detail ul li img {
		width: 100%;
		height: 100%;
		border-radius: 0.1rem;
	}

	.common-list .goods-detail .link-style {
		float: left;
		height: 1.17rem;
		line-height: 1.17rem;
		margin-right: 0.26rem;
	}

	.common-list .goods-detail .link {
		background: #eee;
		height: 0.66rem;
		overflow: hidden;
		padding: 0 0.16rem;
		display: flex;
		align-items: center;
		float: left;
		margin-top: 0.25rem;
	}

	.common-list .goods-detail .link span {
		color: #666;
		font-size: 0.32rem;
		float: left;
		height: 0.66rem;
		line-height: 0.66rem;
		display: inline-block;
	}

	.common-list .goods-detail.link i {
		float: left;
		margin-right: 0.1rem;
	}

	.common-list .goods-detail .address {
		background: #eee;
		height: 0.66rem;
		overflow: hidden;
		padding: 0 0.16rem;
		display: flex;
		align-items: center;
		float: left;
		margin-top: 0.25rem;
	}

	.common-list .goods-detail .address i {
		margin-right: 0.1rem;
	}

	.common-list .browse {
		height: 1.3rem;
		line-height: 1.3rem;
		overflow: hidden;
		width: 100%;
		border-top: dashed 1px #ccc;
	}

	.common-list .browse .browse-data {
		overflow: hidden;
		float: left;
		width: 65%;
	}

	.common-list .browse .browse-data li {
		float: left;
		margin-right: 0.34rem;
		display: flex;
		align-items: center;
	}

	.common-list .browse .browse-data li span {
		font-size: 0.34rem;
		color: #666;
		height: 1.3rem;
		line-height: 1.3rem;
		display: inline-block;
		margin-right: 0.16rem;
	}

	.common-list .browse .browse-imgs {
		float: right;
		overflow: hidden;
		height: 1.3rem;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: right;
	}

	.common-list .browse .browse-imgs li {
		float: left;
		height: 100%;
	}

	.common-list .browse .browse-imgs li img {
		width: 0.66rem;
		height: 0.66rem;
		border-radius: 50%;
		margin: 0.32rem 0 0.32rem 0.13rem;
	}
</style>
<style type="text/css">
	#HotList .vux-button-group>a {
		font-size: 0.45rem;
	}

	#HotList .vux-header {
		padding: 0;
	}

	#HotList .header .header-overwrite-title {
		padding: 0;
	}

	#HotList .vux-button-group>a {
		height: 1rem;
		line-height: 1rem;
	}

	#HotList .vux-button-group>a.vux-button-group-current:before {
		left: 44%;
		width: 0.8rem;
		height: 0.05rem!important;
	}
</style>
